<template>
  <div>
    {{message}}
    <input v-model="message">
    <el-table :data="drivers" :row-class-name="tableRowClassName">

      <el-table-column  label="头像" width="80">
        <template slot-scope="scope">
          <img :src="getImgUrl(scope.row.dpicture)" style="width:40px;height: 40px">
        </template>
      </el-table-column>

      <el-table-column prop="did" label="主键" width="100"/>
      <el-table-column prop="dname" label="姓名" width="100"/>
      <el-table-column prop="dphone" label="电话" width="100"/>
      <el-table-column prop="daccident" :formatter="dateFormat" label="保险时间" width="100"/>
      <el-table-column prop="didentitycard" label="身份证" width="80" style="position: relative">
        <template slot-scope="scope">
          <div v-for="(img,index) in getImgArray(scope.row.didentitycard)">
            <img class="courseImg" :src="getImgUrl2(img)" style="width: 40px;height: 40px;position:absolute;border-radius: 20px;top: 15px;left:0"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="dpicture" label="头像路径" width="100"/>
      <el-table-column prop="didentitycard" label="身份证路径" width="100"/>
      <el-table-column prop="daudittime" :formatter="dateFormat" label="审核时间" width="100"/>
      <el-table-column prop="dcertificate" label="驾驶证" width="100"/>
      <el-table-column prop="dregistrationcertificate" label="登记证图" width="100"/><el-table-column prop="daudittime" label="审核时间" width="100"/>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditDriver(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev,pager,next"
      @current-change="currPageChange"
      :current-page.sync="currPage"
      :pageSize="pageInfo.pageSize"
      :total="pageInfo.itemCount">
    </el-pagination>

    <el-button @click="showAddDriver">新增司机</el-button>
    <addDriver :addDialogIsShow="addDialogIsShow" @closeAddDialog="closeAddDialog" ref="showAddDriver" />
    <editDriver :editDialogIsShow="editDialogIsShow" @closeEditDialog="closeEditDialog" ref="showEditDriver" />


  </div>

</template>
<script>
  import api from "../../../../axios/api.js";
  import * as fecha from "element-ui/lib/utils/date";
  import utilsFD from "../../../../static/js/utils/index.js"
  import addDriver from '@/components/back/yunshu/add.vue'
  import editDriver from '@/components/back/yunshu/edit.vue'

  export default {//default是一个对象，有很多成员变量，其中一个是name 另外一个是data函数（变量名为data，值为返回值的成员变量）
    name: "index",
    components:{addDriver,editDriver},
    /*data(){0
        return{
          students:''
        }
    }*/
    data:function () {//data是一个函数，返回值是一个对象（对象有很多成员变量 就可以定义很多值提供给vue使用）
      return{
        message:'abc',
        drivers:[],/*{"sno":"1000","name":"张三","high":"180"},
        {"sno":"2000","name":"张四","high":"190"},
        {"sno":"3000","name":"张五","high":"200"}*/
        currPage:1,
        pageInfo:{},
        fechaNew : fecha,
        addDialogIsShow : false,//默认增加子组件不现实
        editDialogIsShow : false//默认增加子组件不现实
      }
    },
    methods:{
      getImgUrl: function (dpicture) {
        return "/api/upload/head/" + dpicture;
      },
      getImgUrl2: function (didentitycard) {
        return "/api/upload/idcar/" + didentitycard;
      },
      getDriverByPage:function () {
        api.setDataFromAxios("/api/yunshuController/getAllDriversByPage",{"pageSize":this.pageInfo.pageSize,"currPage":this.currPage},"post",null).then(
          //默认返回就是response对象
          dto=>{
            this.drivers = dto.tList;
            this.pageInfo = dto.obj;
          }
        );
      },
      currPageChange:function () {
        //当前用户选择页码，选中的页码自动同步给currPage，再调用重新分页查询当前页面
        this.getDriverByPage();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 0) {
          return 'warning-row';
        } else {
          return '';
        }
        return '';
      },
      dateFormat(row, column, cellValue) {
        return utilsFD.FD.Fd().dateFormatCN(cellValue,'yyyy-MM-dd HH:mm:ss',fecha);
      },
      closeAddDialog(){
        this.addDialogIsShow = false;
      },
      closeEditDialog(){
        this.editDialogIsShow = false;
        this.getDriverByPage();
      },
      showAddDriver(){
        this.addDialogIsShow = true;
      },
      showEditDriver(){
        this.editDialogIsShow = true;
      },
      handleEditDriver(index,drivers){
        let _this = this;//检查点,判断子组件的init方法是否被正确调用
        this.$nextTick(()=>{
          _this.$refs.showEditDriver.initEditDriver(drivers);
        });
        this.editDialogIsShow = true;//修改父组件变量 设置给子组件显示
      },
      handleDelete(index,drivers){
        const _this = this;
        api.setDataFromAxios("/api/yunshuController/deleteDriverById/" + drivers.did, null, "get", null).then(
          //默认返回就是response对象
          dto=>{
            this.$message.success("删除成功！");
            _this.getDriverByPage();
          }
        );
      },
      //将图片地址按,分隔成数组
      getImgArray(didentitycard){
        return didentitycard==null||didentitycard==''?[]:didentitycard.split(",");
      }
    },
    created() {
      this.getDriverByPage();
    },
    watch: {//watch 用于监控当前页面的变量的值变化 如果直接调用方法是渲染前的界面，使用this.nextTick 中的方法才是渲染完成后调用
      drivers:{
        handler(val, oldVal){
          this.$nextTick(function() {
            //alert($('.courseImg').size());
            $('.courseImg').each(function (i, courseImg) {
              $(courseImg).css("z-index", i).css("left", (i * 15) + 'px');
            });
          })

        },
        deep:true//打开深度监听
      },

    }
  }
</script>

<style scoped lang="stylus">
  .main
    width 1000px
    margin 0 auto
  /deep/ table
    text-align center
    width 700px
    margin 0 auto
  /deep/ .warning-row  /*不写deep渲染出错*/
    background-color oldlace
</style>
